<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  created () {
    this.GetUserInfo()
  },
  methods: {
    ...mapActions([
      'GetUserInfo'
    ])
  }
}
</script>

<style lang="less">
  @import url(./style/reset.less);
  body {
    font-family: Helvetica Neue,Helvetica,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;
    background: url(//res.wx.qq.com/t/wx_fed/webwx/res/static/img/2zrdI1g.jpg) no-repeat 50%;
    background-size: cover;
  }
  html, body {
    height: 100%;
  }
  #app {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .main-container {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #F3F3F3;
    &__left {
      display: flex;
      flex-direction: column;
      width: 260px;
      border-right: 1px solid #E0E0E0;
      box-sizing: border-box;
      background-color: #fff;
      &--header {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        padding: 0 16px;
        flex-shrink: 0;
        .header-search {
          .el-input__icon {
            color: #A8A8A8;
          }
          input {
            border: 0;
            background-color: #EAEAEA;
            &::placeholder {
              color: #A8A8A8;
            }
          }
        }
        .header-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 28px;
          height: 28px;
          flex-shrink: 0;
          border-radius: 5px;
          margin-left: 8px;
          font-size: 14px;
          font-weight: bold;
          color: #A8A8A8;
          background-color: #EAEAEA;
        }
      }
      &--body {
        flex: 1;
        height: 0;
        .scrollbar {
          height: 100%;
        }
      }
    }
    &__right {
      flex: 1;
    }
  }
</style>
